@charset "utf-8";
@import '../basic/mixins';
@import '../basic/variables';

* {
  box-sizing: border-box;
  user-select: none;
}

*,
*:before,
*:after {
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: none;
}

html {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial,
    Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
  background-color: #f6f8fa;
  -webkit-font--smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
}

input,
button,
textarea {
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  user-select: auto;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  background: transparent;
  outline: none;
}

[class*='qt-hairline'] {
  &::after {
    @include hairline();
  }
}

.qt-hairline {
  &,
  &--top,
  &--left,
  &--right,
  &--bottom,
  &--surround,
  &--top-bottom {
    position: relative;
  }

  &--top::after {
    border-top-width: $border-width-base;
  }

  &--left::after {
    border-left-width: $border-width-base;
  }

  &--right::after {
    border-right-width: $border-width-base;
  }

  &--bottom::after {
    border-bottom-width: $border-width-base;
  }

  &,
  &-unset {
    &--top-bottom::after {
      border-width: $border-width-base 0;
    }
  }

  &--surround::after {
    border-width: $border-width-base;
  }
}

.qt-clearfix {
  @include clearfix();
}

.qt-ellipsis {
  @include ellipsis();
}

.qt-multi-ellipsis--l2 {
  @include multi-ellipsis(2);
}

.qt-multi-ellipsis--l3 {
  @include multi-ellipsis(3);
}

.qt-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.qt-block {
  display: block;
}

.qt-flex {
  display: flex;
}

.qt-inline {
  display: inline;
}

.qt-inline-block {
  display: inline-block;
}

.qt-hide {
  display: none;
  visibility: hidden;
}

.qt-vertical-align {
  font-size: 0;
}

.qt-vertical-align:before {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: '';
}

.qt-vertical-align--middle,
.qt-vertical-align--bottom {
  display: inline-block;
  max-width: 100%;
  font-size: $font-size-md;
}

.qt-vertical-align--middle {
  vertical-align: middle;
}

.qt-vertical-align--bottom {
  vertical-align: bottom;
}

.qt-responsive-width {
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
}

.qt-margin {
  margin: $margin-md;
}

.qt-margin--0 {
  margin: 0;
}

.qt-margin--xs {
  margin: $margin-xs;
}

.qt-margin--sm {
  margin: $margin-sm;
}

.qt-margin--lg {
  margin: $margin-lg;
}

.qt-margin--xl {
  margin: $margin-xl;
}

.qt-margin-horizontal {
  margin-right: $margin-md;
  margin-left: $margin-md;
}

.qt-margin-horizontal--0 {
  margin-right: 0;
  margin-left: 0;
}

.qt-margin-horizontal--xs {
  margin-right: $margin-xs;
  margin-left: $margin-xs;
}

.qt-margin-horizontal--sm {
  margin-right: $margin-sm;
  margin-left: $margin-sm;
}

.qt-margin-horizontal--lg {
  margin-right: $margin-lg;
  margin-left: $margin-lg;
}

.qt-margin-horizontal--xl {
  margin-right: $margin-xl;
  margin-left: $margin-xl;
}

.qt-margin-vertical {
  margin-top: $margin-md;
  margin-bottom: $margin-md;
}

.qt-margin-vertical--0 {
  margin-top: 0;
  margin-bottom: 0;
}

.qt-margin-vertical--xs {
  margin-top: $margin-xs;
  margin-bottom: $margin-xs;
}

.qt-margin-vertical--sm {
  margin-top: $margin-sm;
  margin-bottom: $margin-sm;
}

.qt-margin-vertical--lg {
  margin-top: $margin-lg;
  margin-bottom: $margin-lg;
}

.qt-margin-vertical--xl {
  margin-top: $margin-xl;
  margin-bottom: $margin-xl;
}

.qt-margin-top {
  margin-top: $margin-md;
}

.qt-margin-top--0 {
  margin-top: 0;
}

.qt-margin-top--xs {
  margin-top: $margin-xs;
}

.qt-margin-top--sm {
  margin-top: $margin-sm;
}

.qt-margin-top--lg {
  margin-top: $margin-lg;
}

.qt-margin-top--xl {
  margin-top: $margin-xl;
}

.qt-margin-bottom {
  margin-bottom: $margin-md;
}

.qt-margin-bottom--0 {
  margin-bottom: 0;
}

.qt-margin-bottom--xs {
  margin-bottom: $margin-xs;
}

.qt-margin-bottom--sm {
  margin-bottom: $margin-sm;
}

.qt-margin-bottom--lg {
  margin-bottom: $margin-lg;
}

.qt-margin-bottom--xl {
  margin-bottom: $margin-xl;
}

.qt-margin-left {
  margin-left: $margin-md;
}

.qt-margin-left--0 {
  margin-left: 0;
}

.qt-margin-left--xs {
  margin-left: $margin-xs;
}

.qt-margin-left--sm {
  margin-left: $margin-sm;
}

.qt-margin-left--lg {
  margin-left: $margin-lg;
}

.qt-margin-left--xl {
  margin-left: $margin-xl;
}

.qt-margin-right {
  margin-right: $margin-md;
}

.qt-margin-right--0 {
  margin-right: 0;
}

.qt-margin-right--xs {
  margin-right: $margin-xs;
}

.qt-margin-right--sm {
  margin-right: $margin-sm;
}

.qt-margin-right--lg {
  margin-right: $margin-lg;
}

.qt-margin-right--xl {
  margin-right: $margin-xl;
}

.qt-padding {
  padding: $padding-md;
}

.qt-padding--0 {
  padding: 0;
}

.qt-padding--xs {
  padding: $padding-xs;
}

.qt-padding--sm {
  padding: $padding-sm;
}

.qt-padding--lg {
  padding: $padding-lg;
}

.qt-padding--xl {
  padding: $padding-xl;
}

.qt-padding-horizontal {
  padding-right: $padding-md;
  padding-left: $padding-md;
}

.qt-padding-horizontal--0 {
  padding-right: 0;
  padding-left: 0;
}

.qt-padding-horizontal--xs {
  padding-right: $padding-xs;
  padding-left: $padding-xs;
}

.qt-padding-horizontal--sm {
  padding-right: $padding-sm;
  padding-left: $padding-sm;
}

.qt-padding-horizontal--lg {
  padding-right: $padding-lg;
  padding-left: $padding-lg;
}

.qt-padding-horizontal--xl {
  padding-right: $padding-xl;
  padding-left: $padding-xl;
}

.qt-padding-vertical {
  padding-top: $padding-md;
  padding-bottom: $padding-md;
}

.qt-padding-vertical--0 {
  padding-top: 0;
  padding-bottom: 0;
}

.qt-padding-vertical--xs {
  padding-top: $padding-xs;
  padding-bottom: $padding-xs;
}

.qt-padding-vertical--sm {
  padding-top: $padding-sm;
  padding-bottom: $padding-sm;
}

.qt-padding-vertical--lg {
  padding-top: $padding-lg;
  padding-bottom: $padding-lg;
}

.qt-padding-vertical--xl {
  padding-top: $padding-xl;
  padding-bottom: $padding-xl;
}

.qt-padding-top {
  padding-top: $padding-md;
}

.qt-padding-top--0 {
  padding-top: 0;
}

.qt-padding-top--xs {
  padding-top: $padding-xs;
}

.qt-padding-top--sm {
  padding-top: $padding-sm;
}

.qt-padding-top--lg {
  padding-top: $padding-lg;
}

.qt-padding-top--xl {
  padding-top: $padding-xl;
}

.qt-padding-bottom {
  padding-bottom: $padding-md;
}

.qt-padding-bottom--0 {
  padding-bottom: 0;
}

.qt-padding-bottom--xs {
  padding-bottom: $padding-xs;
}

.qt-padding-bottom--sm {
  padding-bottom: $padding-sm;
}

.qt-padding-bottom--lg {
  padding-bottom: $padding-lg;
}

.qt-padding-bottom--xl {
  padding-bottom: $padding-xl;
}

.qt-padding-left {
  padding-left: $padding-md;
}

.qt-padding-left--0 {
  padding-left: 0;
}

.qt-padding-left--xs {
  padding-left: $padding-xs;
}

.qt-padding-left--sm {
  padding-left: $padding-sm;
}

.qt-padding-left--lg {
  padding-left: $padding-lg;
}

.qt-padding-left--xl {
  padding-left: $padding-xl;
}

.qt-padding-right {
  padding-right: $padding-md;
}

.qt-padding-right--0 {
  padding-right: 0;
}

.qt-padding-right--xs {
  padding-right: $padding-xs;
}

.qt-padding-right--sm {
  padding-right: $padding-sm;
}

.qt-padding-right--lg {
  padding-right: $padding-lg;
}

.qt-padding-right--xl {
  padding-right: $padding-xl;
}

.qt-text--primary {
  color: #0e90d2;
}

.qt-text--secondary {
  color: #3bb4f2;
}

.qt-text--success {
  color: #5eb95e;
}

.qt-text--warning {
  color: #f37b1d;
}

.qt-text--danger {
  color: #ee0a24;
}

.qt-text--gray {
  color: #666;
}

.qt-text--white {
  color: #fff;
}

.qt-text--default {
  color: $default-color;
}

.qt-bg--white {
  background-color: #fff;
}

.qt-bg--gray {
  background-color: #f8f8f8;
}

.qt-link--muted {
  color: #666;
}

.qt-text--0 {
  font-size: 0;
}

.qt-text--xs {
  font-size: $font-size-xs;
}

.qt-text {
  font-size: $font-size-md;
}

.qt-text--sm {
  font-size: $font-size-sm;
}

.qt-text--lg {
  font-size: $font-size-lg;
}

.qt-text--xl {
  font-size: $font-size-xl;
}

.qt-text--left {
  text-align: left;
}

.qt-text--right {
  text-align: right;
}

.qt-text--center {
  text-align: center;
}

.qt-text--justify {
  text-align: justify;
}

.qt-width-100 {
  width: 100%;
}

.qt-width-50 {
  width: 50%;
}

.qt-width-25 {
  width: 25%;
}
